// 获取当前选项卡
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  // 向当前页注入脚本
  chrome.tabs.executeScript(
    tabs[0].id,
    { file: "/assets/js/jquery.js" },
    function () {
      // chrome.tabs.executeScript(tabs[0].id, { file: "insert.js" });
      console.log("jquery注入成功");
    }
  );
});

var tableData = [];
var listData = [];
var detailDetail = [];
// 监听消息
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(message);
  if (message.action == "sendFetch") {
    tableData = message.data;
    renderTableList(tableData);
  } else if (message.action === "sendSelector") {
    $("#selectorText-list").val(message.text);
    $("#selector-list").val(message.selector);
  } else if (message.action === "sendXpath") {
    $(".nav-tabs .nav-link").each(function (index) {
      if ($(this).hasClass("active")) {
        if (index == 0) {
          $("#xpath-list").val(message.xpath);
          $("#pageTimes").val(1);
        } else {
          $("#xpath-detail").val(message.xpath);
        }
      }
    });
  } else if (message.action === "sendPageXpath") {
    $("#xpath-list").val(message.xpath);
    $("#pageTimes").val(1);
  } else if (message.action === "sendSingleList") {
    message.data.forEach((item) => {
      listData.push(item);
    });
    renderFiledList(listData);
  } else if (message.action === "sendDeailText") {
    $("#selectorText-detail").val(message.data);
    detailDetail.push(
      message.data.indexOf("<") > -1
        ? JSON.stringify(message.data)
        : message.data
    );
    renderDetailList(detailDetail);
  }
});

function renderTableList(dataList) {
  var strHtml = "";
  dataList.forEach((item, index) => {
    var childHtml = "";
    for (const key in item) {
      childHtml += `<td><div title="${item[key]}" class="${
        key == "content" ? "content-show" : ""
      }">${item[key]}</div></td>`;
    }
    strHtml += `<tr>${childHtml}</tr>`;
  });
  $(".grab-data-list").html(strHtml);
  if (dataList.length == 0) {
    $(".table_empty").eq(0).css("display", "flex");
  } else {
    $(".table_empty").eq(0).css("display", "none");

    $(".content-show").each(function (index) {
      $(this).click(function () {
        $("#content-detail").val($(this).html());
        $("#contentDetailModal").modal("show");
      });
    });
  }
}

function renderFiledList(dataList) {
  var headHtml = `<tr>`;
  var tbodyHtml = `<tr>`;
  dataList.forEach((item, index) => {
    headHtml += `<th>字段${index + 1}</th>`;
    tbodyHtml += `<td><div title="${item}">${item}</div></td>`;
  });
  headHtml += `</tr>`;
  tbodyHtml += `</tr>`;
  $(".list-thead").html(headHtml);
  $(".list-tbody").html(tbodyHtml);

  if (dataList.length == 0) {
    $(".table_empty").eq(1).css("display", "flex");
  } else {
    $(".table_empty").eq(1).css("display", "none");
  }
}

function renderDetailList(dataList) {
  var headHtml = `<tr>`;
  var tbodyHtml = `<tr>`;
  dataList.forEach((item, index) => {
    item = item.replace(/"/g, "'");
    headHtml += `<th>字段${index + 1}</th>`;
    tbodyHtml += `<td><div title="${item}">${item}</div></td>`;
  });
  headHtml += `</tr>`;
  tbodyHtml += `</tr>`;
  $(".detail-thead").html(headHtml);
  $(".detail-tbody").html(tbodyHtml);

  if (dataList.length == 0) {
    $(".table_empty").eq(1).css("display", "flex");
  } else {
    $(".table_empty").eq(1).css("display", "none");
  }
}

document.getElementById("auto-identify").addEventListener("click", function () {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {
      action: "autoIdentify",
    });
  });
});

// document.getElementById("grap-dom").addEventListener("click", function () {
//   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
//     chrome.tabs.sendMessage(tabs[0].id, { action: "fetchMessage" });
//   });
// });

// document.getElementById("clear-table").addEventListener("click", function () {
//   tableData = [];
//   $(".grab-data-list").html("");
//   $(".table_empty").eq(0).css("display", "flex");
//   $("#selectorText-list").val("");
//   $("#selector-list").val("");
//   $("#xpath-list").val("");
//   $("#pageTimes").val("");
//   listData = [];
//   $(".list-thead").html("");
//   $(".list-tbody").html("");
//   $(".table_empty").eq(1).css("display", "flex");
// });

// document.getElementById("send-data").addEventListener("click", function () {
//   $.ajax({
//     method: "POST",
//     url: "http://127.0.0.1:8035/api/test",
//     contentType: "application/json",
//     dataType: "json",
//     data: JSON.stringify({ data: dataList }),
//     success: function (res) {},
//   });
// });

// document.getElementById("auto-page").addEventListener("click", function () {
//   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
//     chrome.tabs.sendMessage(tabs[0].id, {
//       action: "autoPage",
//       xpath: $("#xpath").val(),
//       page: $("#pageTimes").val(),
//     });
//   });
// });

// document.getElementById("jump-page").addEventListener("click", function () {
//   chrome.tabs.create({ url: "other.html" });
// });

// document.getElementById("gather-config").addEventListener("click", function () {
//   $("#gatherConfigModal").modal("show");
// });

// document.getElementById("submitConfig").addEventListener("click", function () {
//   $("#gatherConfigModal").modal("hide");

//   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
//     chrome.tabs.sendMessage(tabs[0].id, {
//       action: "autoPage",
//       xpath: $("#xpath").val(),
//       page: $("#pageTimes").val(),
//     });
//   });
// });

// document.getElementById("parseHtml").addEventListener("click", function () {
//   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
//     chrome.tabs.sendMessage(tabs[0].id, {
//       action: "parseHtml",
//       xpath: $("#xpath-list").val(),
//     });
//   });
// });

// document.getElementById("parseXpath").addEventListener("click", function () {
//   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
//     chrome.tabs.sendMessage(tabs[0].id, {
//       action: "parseXpath",
//       xpath: $("#xpath-detail").val(),
//     });
//   });
// });
